﻿<%@ Page Language="C#" StylesheetTheme="start" %>

<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.IO" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void OnColorChanged(object sender, EventArgs e)
    {
        ColorLabel.ForeColor = Color.FromName(DropDownList1.SelectedValue);
    }

    protected void GetServerTime(object sender, EventArgs e)
    {
        lbTimer.Text = "Server Time:" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scriptMag" runat="server" EnablePartialRendering="true">
    </asp:ScriptManager>
    <DotNetAge:Accordion ID="SampleAccordion" runat="server" AutoHeight="false" Width="400px">
        <Views>
            <DotNetAge:View ID="View3" runat="server" Text="About Accordion">
                <div>
                    The Accordion is a web control that allows you to provide multiple views and display
                    them one at a time. It is like having several Views where only one can be expanded
                    at a time. The Accordion is implemented as a web control that contains View web
                    controls. Accordion is a easy way to use jQuery accordion widget in ASP.NET.
                </div>
                <br />
                <br />
            </DotNetAge:View>
            <DotNetAge:View ID="View5" runat="server" Text="Keep opened after PostBack">
                <p>
                    When change the color of the text below.After postback the Accordion can keep this
                    section opened.
                </p>
                <div>
                    Colors:<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" Width="150"
                        OnSelectedIndexChanged="OnColorChanged">
                        <asp:ListItem Text="Black" Style="background-color: Black; color: White;" Value="Black"></asp:ListItem>
                        <asp:ListItem Text="Red" Style="background-color: Red; color: White;" Value="Red"></asp:ListItem>
                        <asp:ListItem Text="Blue" Style="background-color: Blue; color: White;" Value="Blue"></asp:ListItem>
                    </asp:DropDownList>
                </div>
                <div>
                    <asp:Label ID="ColorLabel" runat="server" Text="Choice the color above the DropDownList to change this label's color"></asp:Label></div>
            </DotNetAge:View>
            <DotNetAge:View ID="View2" runat="server" Text="Using UpdatePanel Control in this section">
                <p>
                    This section is using a UpdatePanel in it. Try the "Go" botton to postback to server
                    and get the server time back.</p>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                    <ProgressTemplate>
                        <div class="dna-state-loading-s">
                            <div>
                            </div>
                        </div>
                    </ProgressTemplate>
                </asp:UpdateProgress>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div>
                            <asp:Label ID="lbTimer" runat="server" Text="Click the 'Go' button to load the server time."></asp:Label></div>
                        <br />
                        <br />
                        <div style="float: right;">
                            <asp:Button ID="Button1" runat="server" Text="Go" OnClick="GetServerTime"></asp:Button>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </DotNetAge:View>
        </Views>
    </DotNetAge:Accordion>
    </form>
</body>
</html>
